---
import Layout from "./Layout.astro";

const { frontmatter = {} } = Astro.props
const { name, pathToProposal, pathToResearch } = frontmatter
---

<style>
  .links {
    display: flex;
    justify-content: flex-end;
  }

  .links > .link  {
    margin-left: 0.5rem;
  }
  :global(.code-image-container) {
      display: flex;
  }

  :global(.code-image-container > div) {
      flex: 50%;
  }

  :global(.code-image-container img) {
      height: 100%;
      object-fit: contain;
  }

  @media (max-width: 800px) {
      :global(.code-image-container) {
          flex-direction: column;
      }

      :global(.code-image-container img) {
          width: 100%;
      }
  }
</style>

<Layout frontmatter={frontmatter}>
  <div class="links">
    {pathToResearch && (
      <a
        class="link"
        href={pathToResearch}
      >
        View Research
      </a>
    )}
    {pathToProposal && (
      <a class="link" href={pathToProposal}>
        View Proposal
      </a>
    )}
  </div>
  <h1>{name}</h1>
  <slot />
</Layout
